.page_top_xian {
	width: 750rpx;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.2);
}
.zl-one-yichu {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}



// text {
// 	vertical-align: middle;
// }

@font-face {
	font-family: zl_number;
	src: url(/font/DINNeuzeitGroteskStd-Light.otf);
}


.zl_font_number {
	font-family: zl_number;
}

.zl-font-xs {
	font-size: 22rpx;
}

.zl-font-sm {
	font-size: 26rpx;
}

.zl-font-md {
	font-size: 28rpx;
}

.zl-font-lg {
	font-size: 30rpx;
}

.zl-font-xl {
	font-size: 34rpx;
}

.zl-flex {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.zl-flex-col {
	display: flex;
	flex-direction: column;
}

.zl-flex-wrap {
	flex-wrap: wrap;
}

.zl-flex-nowrap {
	flex-wrap: nowrap;
}

.zl-col-center {
	align-items: center;
}

.zl-col-top {
	align-items: flex-start;
}

.zl-col-bottom {
	align-items: flex-end;
}

.zl-row-center {
	justify-content: center;
}

.zl-row-left {
	justify-content: flex-start;
}

.zl-row-right {
	justify-content: flex-end;
}

.zl-row-between {
	justify-content: space-between;
}

.zl-row-around {
	justify-content: space-around;
}

.zl-text-left {
	text-align: left;
}

.zl-text-center {
	text-align: center;
}

.zl-text-right {
	text-align: right;
}

.zl-color-white {
	color: white;
}

.zl-color-ff-50 {
	color: rgba(255, 255, 255, 0.50);
}
.zl-color-EB5E00 {
	color: #EB5E00;
}

.zl-color-999 {
	color: #999999;
}
.zl-color-000 {
	color: #000000;
}

.zl-color-666 {
	color: #666666;
}

.zl-color-06 {
	color: #060606;
}

.zl-color-333 {
	color: #333333;
}

.zl-color-red {
	color: #E53F3A;
}

.zl-color-black {
	color: black;
}

.zl-color-input {
	color: #303133;
}

.zl-color-fcf2 {
	color: #FCFCF2;
}

.zl-color-f5 {
	color: #F5F5F5;
}

.zl-bg-color-white {
	background-color: white;
}

.zl-font-bold {
	font-weight: bold;
}

.zl-font-500 {
	font-weight: 500;
}
.zl-font-600 {
	font-weight: 600;
}

.safe-area-inset-bottom {
	height: env(safe-area-inset-bottom);
}

.zl-width-100 {
	width: 100%;
}

@for $i from 0 through 12 {
	.zl-flex-#{$i} {
		flex: $i;
	}
}

/* 定义边框圆角(rpx)单位，大于或等于20的都为rpx单位边框圆角 */
@for $i from 2 through 40 {
	.zl-b-r-#{$i} {
		border-radius: $i + rpx;
	}
}

/* 定义字体(rpx)单位，大于或等于20的都为rpx单位字体 */
@for $i from 20 through 70 {
	.zl-font-#{$i} {
		font-size: $i + rpx;
	}
}

// 定义内外边距，历遍1-80
@for $i from 0 through 80 {
	// 只要双数和能被5除尽的数
	@if $i % 2 == 0 or $i % 5 == 0 {
		// 得出：zl-margin-30或者zl-m-30
		.zl-margin-#{$i}, .zl-m-#{$i} {
			margin: $i + rpx!important;
		}
		
		// 得出：zl-padding-30或者zl-p-30
		.zl-padding-#{$i}, .zl-p-#{$i} {
			padding: $i + rpx!important;
		}
		
		@each $short, $long in l left, t top, r right, b bottom {
			// 缩写版，结果如： zl-m-l-30
			// 定义外边距
			.zl-m-#{$short}-#{$i} {
				margin-#{$long}: $i + rpx!important;
			}
			
			// 定义内边距
			.zl-p-#{$short}-#{$i} {
				padding-#{$long}: $i + rpx!important;
			}
			
			// 完整版，结果如：zl-margin-left-30
			// 定义外边距
			.zl-margin-#{$long}-#{$i} {
				margin-#{$long}: $i + rpx!important;
			}
			
			// 定义内边距
			.zl-padding-#{$long}-#{$i} {
				padding-#{$long}: $i + rpx!important;
			}
		}
	}
}
